<template>
	<el-container>
		<el-main class="nopadding" ref="printMain">
			<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark==='1'">
				<div :class="qrPosition" v-if="selected.includes('4')">
					<QrcodeVue ref="qrcode" value="bpmUrl" :size="100"></QrcodeVue>
				</div>
				<div style="margin: 10px;text-align: center">
					<div v-if="printFlag==true" v-html="bpmFormHtml"></div>
					<el-config-provider :locale="elLocale" v-if="printFlag!=true">
						<VFormRender ref="preForm" :preview-state="true"></VFormRender>
					</el-config-provider>
				</div>
				<el-card shadow="never" header="流程附件" v-if="selected.includes('1') && bpmList.runAttach!=''">
					<el-form-item label="公共附件">
						<attach-menu :attach-ids="bpmList.runAttach" :roleFlag="bpmFlow.attachRole==1?'3':'2'" :preview="true"></attach-menu>
					</el-form-item>
				</el-card>
				<el-card shadow="never" header="关联流程" v-if="selected.includes('5')&&isShowBpmLink">
					<bpmlink ref="bpmLink" :bpm-link-flag="1" :runId="runId" @success="setBpmLinkShow"></bpmlink>
				</el-card>
				<el-card shadow="never" header="会签意见" v-if="selected.includes('2')">
					<ideaRecord :bpm-step-run-list="bpmStepRunList" :hidden-opt="false"></ideaRecord>
				</el-card>
				<el-card shadow="never" header="审批过程" v-if="selected.includes('3')">
					<scTable :data="bpmStepRunList" stripe :hidePagination="true" :hideSetting="true" :hideRefresh="true">
						<el-table-column label="#" type="index"  width="50"></el-table-column>
						<el-table-column label="步骤名称" prop="stepName" width="150"></el-table-column>
						<el-table-column label="办理人员" prop="userName" width="170" align="center">
							<template #default="scope">
								<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
								<span style="position: absolute;margin-left: 10px">{{scope.row.userName}}</span>
							</template>
						</el-table-column>
						<el-table-column label="转交人" prop="createUserName" width="170" align="center">
							<template #default="scope">
								<el-avatar :src="scope.row.createAvatar" size="small"></el-avatar>
								<span style="position: absolute;margin-left: 10px">{{scope.row.createUserName}}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="createTime" width="150" align="center"></el-table-column>
						<el-table-column label="接收时间" prop="recTime" width="150" align="center"></el-table-column>
						<el-table-column label="结束时间" prop="endTime" width="150" align="center"></el-table-column>
						<el-table-column label="客观意见" prop="passStatus" width="100" align="center">
							<template #default="scope">
								{{scope.row.passStatus=='1'?'同意':'不同意'}}
							</template>
						</el-table-column>
						<el-table-column label="审批意见" prop="ideaText" align="left">
							<template #default="scope">
								<div style="float: right;position: relative;">
									<el-icon v-if="scope.row.passStatus=='1'" style="color:#67C23A;font-size: 20px"><el-icon-circle-check-filled/></el-icon>
									<el-icon v-else-if="scope.row.passStatus=='0'" style="color:#F56C6C;font-size: 20px"><el-icon-circle-close-filled/></el-icon>
									<el-icon v-else style="color:#909399;font-size: 20px"><el-icon-clock/></el-icon>
								</div>
								<div style="width: 100%">
									<div>
										{{scope.row.ideaText}}
									</div>
									<attach-menu :attachIds="scope.row.stepAttach" :roleFlag="3" :preview="true"></attach-menu>
								</div>
							</template>
						</el-table-column>
					</scTable>
				</el-card>
			</sc-water-mark>
		</el-main>
		<el-footer>
			<div style="display: inline-block;">
				<el-checkbox-group v-model="selected">
					<el-checkbox label="1">公共附件</el-checkbox>
					<el-checkbox label="2">会签意见</el-checkbox>
					<el-checkbox label="3">审批过程</el-checkbox>
					<el-checkbox label="5">关联</el-checkbox>
					<el-checkbox label="4">二维码</el-checkbox>
				</el-checkbox-group >
			</div>
			<div style="display: inline-block;margin-left: 10px;position: relative;top:-5px" v-if="selected.includes('4')">
				<el-radio-group v-model="qrPosition">
					<el-radio-button label="leftTop">左上</el-radio-button>
					<el-radio-button label="rightTop">右上</el-radio-button>
					<el-radio-button label="leftBottom">左下</el-radio-button>
					<el-radio-button label="rightBottom">右下</el-radio-button>
				</el-radio-group>
			</div>
			<div style="display: inline-block;float: right">
				<el-button type="danger" @click="closeTas">关闭</el-button>
				<el-button type="warning" @click="printBpm">打印</el-button>
			</div>
		</el-footer>
	</el-container>

</template>
<script>
import print from '@/utils/print'
import zhCNLang from 'element-plus/lib/locale/lang/zh-cn'
import enUSLang from 'element-plus/lib/locale/lang/en'
import VFormRender from "@/components/designer/form-render";
import ideaRecord from './idearecord'
import AttachMenu from '@/views/module/attachMenu'
import QrcodeVue from "qrcode.vue";
import bpmlink from "@/views/doc/handle/bpmlink.vue";
export default {
	name: 'Form Details',
	components: {
		bpmlink,
		QrcodeVue,
		VFormRender,
		ideaRecord,
		AttachMenu
	},
	data() {
		return {
			elLocaleMap: {
				'zh-cn': zhCNLang,
				'en': enUSLang,
			},
			runId: this.$route.query.runId,
			selected:['1','2'],
			bpmStepRunList:[],
			waterMark:'0',
			waterMarkContent:'',
			waterMarkSubtext:'',
			printFlag:false,
			bpmFormHtml:"",
			bpmFlow:{},
			bpmList:{},
			formJson: {formConfig: {}, widgetList: {}},
			formData: {},
			qrPosition:'leftTop',
			bpmUrl:'',
			isShowBpmLink:true
		}
	},
	watch:{
		"selected":{
			handler(val)
			{
				if(val.includes("4"))
				{
					this.bpmUrl = window.location.href;
				}
			}
		}
	},
	computed: {
		elLocale() {
			let curLocale = localStorage.getItem('APP_LANG') || 'zh-cn'
			return this.elLocaleMap[curLocale]
		},
	},
	mounted() {
		this.getBpmFormJsonByFormId();
	},
	methods: {
		async getBpmFormJsonByFormId() {
			var res = await this.$API.bpm.bpmForm.getBpmFormDetailsByRunIdForPrint.get({runId: this.runId});
			if (res.code == 200) {
				this.bpmFlow = res.data.bpmFlow;
				this.bpmList = res.data.bpmList;
				this.formJson = res.data.formJson;
				this.bpmFormHtml = res.data.bpmFormHtml;
				this.printFlag = res.data.printFlag;
				this.waterMark = this.$TOOL.data.get("WATER_MARK")=='1'?this.$TOOL.data.get("WATER_MARK"):this.bpmFlow.waterMark;
				this.waterMarkSubtext = this.$TOOL.data.get("WATER_MARK")=='1'?this.$TOOL.data.get("WATER_MARK_SUBTEXT"):res.data.waterMarkSubtext;
				this.waterMarkContent = this.$TOOL.data.get("WATER_MARK")=='1'?this.$TOOL.data.get("WATER_MARK_CONTENT"):res.data.waterMarkContent;
				this.$refs.preForm.setFormJson(this.formJson);
				this.bpmStepRunList = res.data.allBpmRunStep;
			}else{
				this.$alert(res.message, "提示", {type: 'error'});
			}
		},
		closeTas() {
			window.close();
		},
		printBpm(){
			//直接传入REF或者querySelector
			//print(this.$refs.printMain)
			print(this.$refs.printMain)
		},
		setBpmLinkShow(flag)
		{
			this.isShowBpmLink = flag
		}
	}
}
</script>

<style scoped>
:deep(.el-form-item){
	display: flex;
}
:deep(.el-input__inner){
	-webkit-text-fill-color: #05181b !important;
}
:deep(.el-textarea__inner){
	-webkit-text-fill-color: #05181b !important;
}
:deep(.el-range-input){
	-webkit-text-fill-color: #05181b !important;
}
.leftTop{
	position: fixed; left:0; top:0
}
.rightTop{
	position: fixed; right:0; top:0
}
.leftBottom{
	position: fixed; left:0; bottom:50px
}
.rightBottom{
	position: fixed; right:0; bottom:50px
}
</style>
